<template>  
  <div class="container">  
    <!-- 轮播图部分 -->  
    <el-carousel :interval="5000" height="300px">  
      <el-carousel-item 
      v-for="(image, index) in images" 
      :key="index" 
      @click="goToLink(links[index])" 
    >  
        <img :src="image" alt="Carousel Image" style="width: 100%; height: 100%; object-fit: cover;" />  
      </el-carousel-item>  
    </el-carousel>  

    <!-- 歌曲展示容器 -->  
    <div class="songs-container">  
        <el-card>
        <div class="songs-header">  
          <span class="hot-songs"><h2>热门歌曲</h2></span>  
          <el-button type="text" class="more-songs" @click="goToMusicLibrary()">
            <h4>
            >> 更多
            </h4>

          </el-button>  
        </div>  
            <div class="songs-list">  
                    <el-card  class="song" v-for="(song, index) in songs" :key="index" style="width: 300px; margin-right: 20px;">  
                      <img :src="'http://localhost:8080/images/upload/' + song.cover_image" alt="Song Cover" 
                      @click="goToPlayer(song)"/> 
                      <div class="song-info">  
                        <div class="song-name">{{ song.music_name }}</div>  
                        <div class="song-artist">{{ song.artist }}</div>
                        <div class="song-artist">{{ '播放量'+song.duration }}</div>    
                      </div>  
                    </el-card>  
            </div>  
        </el-card>
    </div>  

    <!-- 大容器 -->  
    <div class="main-container">  
      <!-- 学习乐谱 -->  
       <div class="section-container">  
       <el-card class="music-card" @click="goToNotation()">
        <div class="section-header">  
          <h2 style="text-align: left;">
            学习乐谱

          </h2>  
        </div>  
        <div class="section-content">  
          <div class="image-area">  
            <el-carousel :interval="5000" height="200px">  
              <el-carousel-item v-for="(image_study, index) in images_study" :key="'learning-' + index">  
                <img :src="image_study" alt="Learning Image" style="width: 100%; height: 100%; object-fit: cover;" />  
              </el-carousel-item>  
            </el-carousel>  
          </div>  
          <div class="text-area" style="background-color: #f9f9f9; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); max-width: 600px; margin: auto;">  
              <p style="font-family: 'Source Sans Pro', sans-serif; font-size: 18px; line-height: 1.6; color: #555; text-align: left;">  
                  每一个音符都是心灵的涟漪，拨动着内心深处的情感。学习音乐，就像在探索一片神秘的花园，音阶是那绚丽的花朵，和声是风中传来的轻声细语。  
              </p>  
          </div>  
                    
        </div>  
      </el-card>

      </div>  
      
     
       <!-- 学习乐理 -->  
      <div class="section-container"> 
        <el-card class="music-card" @click="goToKnowledge()">
                  <div class="section-header">  
                    <h2 style="text-align: left;">
                        学习乐理
                    </h2>
                  </div>  
            <div class="section-content">  
                  <div class="image-area">  
                        <el-carousel :interval="5000" height="200px">  
                          <el-carousel-item v-for="(image_culture, index) in images_culture" :key="'cultural-' + index">  
                            <img :src="image_culture" alt="Cultural Image" style="width: 100%; height: 100%; object-fit: cover;" />  
                          </el-carousel-item>  
                        </el-carousel>  
                  </div>  
                  <div class="text-area" 
                      style="background-color: #f9f9f9; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); max-width: 600px; margin: auto;">  
                      <p style="font-family: 'Source Sans Pro', sans-serif; font-size: 18px; line-height: 1.6; color: #555; text-align: left;">  
                          在音乐的世界里，传统与创新相辅相成，古老的旋律诉说着历史的传承，而新的节拍则激荡出时代的脉动。  
                      </p>  
                  </div>
            </div>  
        </el-card>
      </div>  
    </div>  


    <!-- 笔记展示容器 -->  
    <div class="notes-container">  
      <el-card>
      <div class="notes-header">  
        <span class="hot-notes"><h2>热门笔记</h2></span>  
        <el-button type="text" class="more-notes" @click="goToNote()">
          <h4>
   
           >> 更多
        </h4>


        </el-button>  
      </div>  
      <div class="notes-list">  
        <el-card class="note" v-for="(note, index) in notes" :key="index" style="width: 300px; margin-right: 20px;">  
          <img :src="'http://localhost:8080/images/upload/' + note.image" alt="Note Cover" 
          @click="goToNoteDetail(note)"/>  
          <!-- 笔记相关信息 -->
          <div class="note-info">  
            
            <div class="note-title">{{ note.title }}</div>  
            <!-- <div class="note-author">{{ note.view_count }}</div>   -->
          </div>  
        </el-card>  
      </div>  
    </el-card>
    </div>  

    <!-- 大容器 -->  
    <div class="main-container">  
      <!--  学习乐器容器 -->  
       <div class="section-container">  
       <el-card class="music-card" @click="goToInstrument()">
        
        <div class="section-header">  
          <h2 style="text-align: left;">
            学习乐器

          </h2>  
          
        </div>  
        
        <div class="section-content">  
          <div class="image-area">  
            <el-carousel :interval="5000" height="200px">  
              <el-carousel-item v-for="(image_study, index) in images_study" :key="'learning-' + index">  
                <img :src="image_study" alt="Learning Image" style="width: 100%; height: 100%; object-fit: cover;" />  
              </el-carousel-item>  
            </el-carousel>  
          </div>  
          <div class="text-area" style="background-color: #f9f9f9; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); max-width: 600px; margin: auto;">  
              <p style="font-family: 'Source Sans Pro', sans-serif; font-size: 18px; line-height: 1.6; color: #555; text-align: left;">  
                  每一个音符都是心灵的涟漪，拨动着内心深处的情感。学习音乐，就像在探索一片神秘的花园，音阶是那绚丽的花朵，和声是风中传来的轻声细语。  
              </p>  
          </div>  
                    
        </div>  
      </el-card>

      </div>  
      
    
       <!-- 学习文化背景容器 -->  
      <div class="section-container"> 
        <el-card class="music-card" @click="goToBack()">
                  <div class="section-header">  
                    <h2 style="text-align: left;">
                        学习文化背景
                    </h2>
                  </div>  
            <div class="section-content">  
                  <div class="image-area">  
                        <el-carousel :interval="5000" height="200px">  
                          <el-carousel-item v-for="(image_culture, index) in images_culture" :key="'cultural-' + index">  
                            <img :src="image_culture" alt="Cultural Image" style="width: 100%; height: 100%; object-fit: cover;" />  
                          </el-carousel-item>  
                        </el-carousel>  
                  </div>  
                  <div class="text-area" 
                      style="background-color: #f9f9f9; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); max-width: 600px; margin: auto;">  
                      <p style="font-family: 'Source Sans Pro', sans-serif; font-size: 18px; line-height: 1.6; color: #555; text-align: left;">  
                          在音乐的世界里，传统与创新相辅相成，古老的旋律诉说着历史的传承，而新的节拍则激荡出时代的脉动。  
                      </p>  
                  </div>
            </div>  
        </el-card>
      </div>  
    </div> 
  </div>  
</template>  

<script>
export default {
  data() {
    return {
      // 首页顶部轮播图图片数组
      images: [
        'http://localhost:8080/images/upload/首页轮播图1.png',    //实际第一张
        'http://localhost:8080/images/upload/首页轮播图2.png',    //实际第二张
        'http://localhost:8080/images/upload/首页轮播图5.png',    //实际第三张
        'http://localhost:8080/images/upload/首页轮播图4.png',    //实际第四张
        
      ],
      // 首页顶部轮播图图片数组跳转链接
      links: [
        '/Culture',  // 跳转到文化雅集
        '/Study',  // 图片2的链接
        '/MusicLibrary',  // 图片3的链接
        '/Note',  // 图片3的链接
       
      ],
      // 音乐学习轮播图图片数组
      images_study: [
        'http://localhost:8080/images/upload/首页轮播图3.png',
        'http://localhost:8080/images/upload/首页轮播图5.png',
        'http://localhost:8080/images/upload/首页轮播图4.png',
        'http://localhost:8080/images/upload/首页轮播图4.png',
      ],
      // 音乐文化轮播图图片数组
      images_culture: [
        'http://localhost:8080/images/upload/首页轮播图3.png',
        'http://localhost:8080/images/upload/首页轮播图1.png',
        'http://localhost:8080/images/upload/首页轮播图2.png',
        'http://localhost:8080/images/upload/首页轮播图4.png',
      ],
      // 歌曲信息数组，初始为空，将通过API从后端获取
      songs: [],
      // 笔记信息数组
      notes: [],
    };
  },
  methods: {
    
    //首页轮播图跳转链接
    goToLink(link) {
      // 跳转到指定链接
      this.$router.push(link); // 如果您使用 Vue Router
      // 或者使用 window.location.href = link; 进行普通的跳转
    },
    goToBack(){
      this.$router.push({name:'MyCultureBack'})
    },
    goToInstrument(){
      this.$router.push({name:'InstrumentManage'})
    },
    goToKnowledge(){
      this.$router.push({name:'Knowledge'})
    },
    goToNotation(){
      this.$router.push({name:'Notation'})
    },
    goToNote(){
      this.$router.push({name:'Note'})
    },
    goToStudy(){
      this.$router.push({name:'Study'})
    },
    goToCulture(){
      this.$router.push({name:'Culture'})
    },
    goToMusicLibrary(){

      this.$router.push({name:'MusicLibrary'})
    
    },
    goToNoteDetail(note){
      console.log(note.note_create_id)
      sessionStorage.setItem('note_id', note.note_create_id);
      this.$router.push({name:'NoteDetail'},note)
    },
      goToPlayer(song){
      console.log(song.music_id)
      sessionStorage.setItem('music_id', song.music_id);
      this.$router.push({name:'Player'},song)
    
    },
   
  fetchSongs() {
    fetch('http://localhost:8080/music/sorted-by-duration') // 获取按播放量排序的歌曲API
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        this.songs = data.slice(0, 5); // 只取前5首歌曲
      })
      .catch(error => console.error('Error fetching songs:', error));
  },
  fetchNotes() {
    fetch('http://localhost:8080/v1/NoteCreate/view_count') // 获取按播放量排序的歌曲API
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        this.notes = data.slice(0, 5); // 只取前5篇笔记
      })
      .catch(error => console.error('Error fetching notes:', error));
  }
},
  created() {
    this.fetchSongs(); // 组件创建时调用fetchSongs方法,得到热门歌曲信息
    this.fetchNotes(); // 组件创建时调用fetchNotes方法，得到热门笔记信息
  }
};
</script>

<style scoped>  
.note {
  width: 300px; 
  margin-right: 20px; 
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */
}

.note:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* 增加阴影效果 */
  transform: translateY(-15px); /* 提升卡片位置，创建浮动效果 */
}

.song {
  width: 300px; 
  margin-right: 20px; 
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* 添加过渡效果 */
}

.song:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* 增加阴影效果 */
  transform: translateY(-15px); /* 上升效果 */
}
.music-card {

  margin-bottom: 20px; /* 添加底部间距 */
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* 添加动画平滑效果 */
}

/* 鼠标悬停效果 */
.music-card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
  transform: translateY(-15px); /* 提升卡片位置，创建浮动效果 */
}
.container {  
  padding: 0 100px; /* 左右各留出100px的空白 */  
}  

.songs-container,  
.notes-container {  
  margin-top: 20px;  
}  

.songs-header,  
.notes-header {  
  display: flex;  
  justify-content: space-between;  
  font-size: 18px;  
  padding: 10px;  
}  

.songs-list,  
.notes-list {  
  display: flex;  
  overflow-x: auto; /* 使子元素可水平滚动 */  
  padding: 10px 10px 0; /* 为歌曲/笔记列表添加一些内边距 */  
}  

.song img,  
.note img {  
  width: 100%;  
  height: auto;  
  border-radius: 5px;  
}  

.song-info,  
.note-info {  
  text-align: center;  
  margin-top: 5px;  
}  

.note-title,  
.song-name {  
  font-weight: bold;  
}  

.note-author,  
.song-artist {  
  font-size: 14px;  
  color: #666;  
}  

/* 新增大容器样式 */  
.main-container {  
  display: flex;  
  justify-content: space-between;  
  margin-top: 20px;  
}  

/* 每个子容器 */  
.section-container {  
  width: 50%; /* 1:1比例的两部分 */  
  padding: 10px;  
}  

/* 子容器内内容 */  
.section-content {  
  display: flex;  
}  

/* 左侧的轮播图区域 */  
.image-area {  
  width: 60%; /* 6:4比例 */  
}  

/* 右侧的文字展示区域 */  
.text-area {  
  width: 40%; /* 6:4比例 */  
  padding-left: 20px; /* 添加一些间距 */  
}  

.section-header {  
  margin-bottom: 10px;  
}  
/* 调整“更多”按钮的样式 */
.more-songs, .more-notes {
  color: #333 !important; /* 使用 !important 确保样式被应用 */
  text-decoration: none !important;
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  text-decoration: none; /* 去除下划线 */
  transition: color 0.3s ease; /* 颜色变化的过渡效果 */
}
</style>